<template>
<el-card class="box-card el-card-flex">
  <div slot="header" class="clearfix">
    <span>日程来源配置</span>
    <div style="float: right">
      <el-button type="primary" plain @click="sourceAdd">
        新增
        <i class="el-icon-plus"></i>
      </el-button>
    </div>
  </div>
  <div class="text item">
    <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="">
        <el-input clearable v-model="expression" placeholder="请输入来源编码/名称" @keyup.enter.native="sourceSearchEvent" @clear="sourceSearchEvent">
          <el-button slot="append" icon="el-icon-search" @click="sourceSearchEvent"></el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="el-flex el-box-column">
      <el-table
        :data="sourceTabelData"
        border
        stripe
        style="width: 100%"
        height="100%"
        ref="sourceRefTable"
      >
        <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="scheduleSrcCode" label="来源编码"></el-table-column>
        <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="scheduleSrcName" label="来源名称"></el-table-column>
        <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="scheduleSrcUrl" label="跳转地址"></el-table-column>
        <el-table-column width="110" sortable prop="control" align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button class="td-btn-icon" type="text" title="修改日程来源配置" icon="el-icon-edit" @click="sourceEdit(scope.$index, scope.row)"></el-button>
            <el-button class="td-btn-icon" type="text" title="删除日程来源配置" icon="el-icon-delete" @click="sourceDelete(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSourceSizeChange"
        :current-page="page"
        @current-change="handleSourceCurrentChange"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total">
      </el-pagination>
    </div>
  </div>
  <!-- 新增框 -->
  <el-dialog
    :title="title"
    :before-close="handleSourceClose"
    :visible.sync="dialogSourceVisible"
    custom-class="el-dialog-flex"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form  :model="formSourceInline" ref="formSourceInline" :rules="rules">
      <el-form-item
        label="来源编码:"
        prop="scheduleSrcCode"
        :rules="[
          {
            required: true,
            message: '请填写来源编码',
            trigger: 'blur'
          }
        ]"
      >
        <el-col :span="9">
          <el-input v-model="formSourceInline.scheduleSrcCode" placeholder="来源编码" :readonly="readonly"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item
        label="来源名称:"
        prop="scheduleSrcName"
        :rules="[
          {
            required: true,
            message: '请填写来源名称',
            trigger: 'blur'
          }
        ]"
      >
        <el-col :span="11">
          <el-input v-model="formSourceInline.scheduleSrcName" placeholder="来源名称"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item
        label="跳转地址:"
        prop="scheduleSrcUrl"
        :rules="[
          {
            required: true,
            message: '请填写跳转地址',
            trigger: 'blur'
          }
        ]"
      >
        <el-col :span="15">
          <el-input v-model="formSourceInline.scheduleSrcUrl" placeholder="跳转地址"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" style="text-align:right;width:100%;display:inline-block;margin-top:20px;">
      <el-button type="primary" @click="handleSure">确定 <i class="el-icon-document-checked el-icon--right"></i></el-button>
      <el-button type="danger" @click="handleCancel">取消 <i class="el-icon-close"></i></el-button>
    </span>
  </el-dialog>
</el-card>
</template>
<script>
import { Dialog, Table, TableColumn, Pagination, MessageBox, Message, Drawer } from 'element-ui'
import { scheduleSourceList, deleteByCodes, sourceSaveOrUpdate, sourceEditOrUpdate, sourceDetails } from '@/api/system/dailySourceAllocation/dailySourceAllocation.js'
export default {
  name: 'dailySourceAllocation',
  data () {
    return {
      expression: '', // 模糊搜索值
      searchData: '', // 定义模糊搜索值
      sourceTabelData: [], // 获取查询日程来源配置列表数据数组
      title: '', // 弹框标题
      dialogSourceVisible: false,
      formSourceInline: {}, // 表单对象
      rules: {},
      formSourceInlineDefault: { // 初始化表单
        scheduleSrcCode: '',
        scheduleSrcName: '',
        scheduleSrcUrl: ''
      },
      readonly: '', // 编辑时禁用来源编码
      page: 1,
      size: 20,
      total: 0
    }
  },
  components: {
    'el-dialog': Dialog, // 对话框
    'el-table': Table, // 表格
    'el-table-column': TableColumn, // 表格列
    'el-pagination': Pagination, // 分页
    'el-drawer': Drawer // 抽屉弹框
  },
  created() {
    this.sourceTabelEvent()
    window.onresize = () => {
      this.$refs.sourceRefTable.doLayout()
    }
  },
  methods: {
    // 搜索事件
    sourceSearchEvent() {
      if (this.expression) { // 有数据要搜索
        this.searchData = this.expression
        scheduleSourceList(this.page, this.size, {
          expression: this.searchData
        }).then(res => {
          this.sourceTabelData = res.data.data.records
          this.total = res.data.data.total
        })
      } else { // 搜索输入框是空的说明是要重置了展示全部数据
        this.searchData = ''
        scheduleSourceList(this.page,this.size, {}).then(res => {
          this.sourceTabelData = res.data.data.records
          this.total = res.data.data.total
        })
      }
    },
    // 获取查询日程来源配置列表数据
    sourceTabelEvent () {
      scheduleSourceList(this.page, this.size, {}).then(res => {
        this.sourceTabelData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    // 来源新增事件
    sourceAdd () {
      this.dialogSourceVisible = true
      this.title = '新增日常来源配置'
      this.readonly = false
    },
    // 来源编辑事件
    sourceEdit (index, row) {
      this.dialogSourceVisible = true
      this.title = '编辑日常来源配置'
      this.readonly = true
      sourceDetails(row.scheduleSrcCode).then(res => {
        this.formSourceInline = res.data.data
      })
    },
    // 来源删除事件
    sourceDelete (index, row) {
      console.log(row)
      let scheduleSrcCodes = row.scheduleSrcCode
      MessageBox.confirm('您是否确定删除该行内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteByCodes([scheduleSrcCodes]).then(res =>{
          console.log(res)
          if(res.data.code = 10000){
            this.sourceTabelEvent()
            Message.success("删除成功")
          }
          }).catch(error =>{
            Message.info('删除失败')  
        })
      }).catch(() => {
        Message.info('已取消删除')       
      })
    },
    // 日常来源列表每页数据
    handleSourceSizeChange (val) {
      this.size = val
      this.sourceTabelEvent()
    },
    // 日常来源列表当前页数
    handleSourceCurrentChange (val) {
      this.page = val
      this.sourceTabelEvent()
    },
    // 弹框关闭事件
    handleSourceClose () {
      this.formSourceInline = JSON.parse(JSON.stringify(this.formSourceInlineDefault))
      if (this.$refs.formSourceInline !== undefined) {
        this.$refs.formSourceInline.resetFields() // 清空校验
      }
      this.dialogSourceVisible = false
    },
    // 弹框确定按钮
    handleSure () {
      this.$refs.formSourceInline.validate(valid => {
        if (!valid) return false
        if (this.title == '新增日常来源配置') {
          sourceSaveOrUpdate(this.formSourceInline).then(res => {
            console.log(res)
            if (res.data.code == 10000) {
              this.handleSourceClose()
              Message.success('保存成功')
              this.sourceTabelEvent()
            }
          })
        } else if (this.title == '编辑日常来源配置') {
          sourceEditOrUpdate(this.formSourceInline).then(res => {
            console.log(res)
            if (res.data.code == 10000) {
              this.handleSourceClose()
              Message.success('保存成功')
              this.sourceTabelEvent()
            }
          })
        }
      })
    },
    // 弹框取消按钮
    handleCancel () {
      this.handleSourceClose()
    }
  }
}
</script>